<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义布局</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="https://at.alicdn.com/t/font_3209755_f8repcdelso.css" type="text/css">
	<script src="./js/echarts.min.js"></script>
	<script src="./js/element-resize-detector.min.js"></script>
	<script src="./js/vue-grid-layout.umd.min.js"></script>
	<style scoped>
		body {
			font-family: LatoRegular,sans-serif;
			color: #111;
			background-color: #fff;
			margin: 0 auto;
			padding: 0;
			text-rendering: optimizeLegibility;
		}
		
		.vue-grid-layout {
		}
		.layoutbccBox{
			border: 10px solid #f0f0f0;
			margin-left: 10px;
		}
		.vue-grid-item.cssTransforms{
			top: -10px;
		}
		.layoutbcc {
			min-height: 700px;
			background-color: var(--bg_ebebeb);
    		background-size: 8.276% 70px!important;
    		background-image: linear-gradient(90deg,#f4f4f4 11px,transparent 0),linear-gradient(0deg,#f4f4f4 10px,transparent 0);
		}
		.grid_edited .AD_GridContainer .grid-stack>.grid-stack-item>.grid-stack-item-content{
			
		}
		.vue-grid-item:not(.vue-grid-placeholder) {
		    background: #fff;
		}
		.vue-grid-item .resizing {
		    opacity: 0.9;
		}

		.vue-grid-item .static {
		    background: #cce;
		}
		.vue-grid-item .text {
		    font-size: 24px;
		    text-align: center;
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    margin: auto;
		    height: 100%;
		    width: 100%;
		}
		.vue-grid-item .no-drag {
		    height: 100%;
		    width: 100%;
		}
		.vue-grid-item .minMax {
		    font-size: 12px;
		}
		.vue-grid-item .add {
		    cursor: pointer;
		}
		.vue-draggable-handle {
		    position: absolute;
		    width: 20px;
		    height: 20px;
		    top: 0;
		    left: 0;
		    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
		    background-position: bottom right;
		    padding: 0 8px 8px 0;
		    background-repeat: no-repeat;
		    background-origin: content-box;
		    box-sizing: border-box;
		    cursor: pointer;
		}
		.xianshuo{
			height: 100%;
			width: 100%;
			border-color: transparent;
			box-shadow: 0 1px 10px 0 rgb(0 0 0 / 20%);
			touch-action: none;
			overflow: hidden;
			border-radius: 6px;
		}
		.xianshuo_li{
			margin: 10px 10px 0px 10px;
		}
		.xianshuo_li .icon-xiangshang{
			color: #26af45;
			margin-left: 10px;
		}
		.xianshuo_li .color{
			color: #26af45;
			margin-left: 5px;
		}
		.xianshuo_li .colorred{
			color: #ff7b79;
			margin-left: 10px;
		}
		.xianshuo_li .upper{
			color: #697794;
		}
		.xianshuo_her{
			margin: 10px;
			overflow: hidden;
		}
		.xianshuo_her .xianshuo_herLeft{
			float: left;
			width: 70%;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 16px;
			white-space: nowrap;
		}
		.xianshuo_her .xianshuo_herRight{
			float: right;
			cursor: pointer;
		}
		.xianshuo_ter{
			text-align: center;
		}
		.xianshuo_img{
			text-align: center;
			margin-top:10px;
		}
		.mainleft{
			margin: 10px;
		}
		.meter_select{

		}
		.el-collapse-item__header{
			font-size: 16px;
		}
		.merter_zujian{
			font-size: 15px;
			margin: 15px 0px;
		}
		.merter_checkbox .merter_cek{
			margin-bottom: 10px;
			margin-left: 15px;
		}
		.hertext{
			overflow: hidden;
			margin: 10px 15px;
		}
		.hertext .hertext_left{
			float: left;
		}
		.hertext .hertext_right{
			float: right;
		}
		.charBox{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			background: #D7DFE9;
			height: 100%;
    	}
		.charBox .char{
			-ms-flex: 1;
			flex: 1;
			width: 100px;
			height: 100%;
		}
	</style>
</head>
<body>
    <div id="app">
		<div class="hertext">
			<div class="hertext_left">
				<a href="./home.html">主页布局</a>
			</div>
			<div class="hertext_right">
				<el-button type="primary" @click="baocunDemo()">保存</el-button>
  				<el-button type="success">取消</el-button>
			</div>
		</div>
		<el-row>
			<el-col :span="4">
				<div class="mainleft">
					<el-collapse v-model="activeNames" @change="handleChange">
						<el-collapse-item title="仪表板" name="1">
							<div class="meter">
								<!-- <div class="meter_select">
									<el-select v-model="value" filterable placeholder="请选择" @change="changeSeleDemo">
										<el-option
										  v-for="item in options"
										  :key="item.value"
										  :label="item.label"
										  :value="item.value">
										</el-option>
									</el-select>
								</div> -->
								<div class="merter_zujian">选择组件</div>
								<div class="merter_checkbox ">
									<el-checkbox-group v-model="checkList" @change="changeEck">
										<div class="merter_cek" v-for="itemcek in eckList">
											<el-checkbox :label='itemcek.id'>{{itemcek.name}}</el-checkbox>
										</div>
										<!-- <div class="merter_cek"><el-checkbox label='{"x":0,"y":0,"w":3,"h":2,"i":"1"}'>组件2</el-checkbox></div>
										<div class="merter_cek"><el-checkbox label='{"x":0,"y":0,"w":6,"h":5,"i":"2"}'>组件3</el-checkbox></div> -->
									</el-checkbox-group>
								</div>
							</div>
						</el-collapse-item>
						<el-collapse-item title="自定义视图" name="2">
							<div>1</div>
							<div>2</div>
						</el-collapse-item>
					  </el-collapse>
				</div>
			</el-col>
			<el-col :span="20">
				<div class="layoutbccBox">
				<grid-layout
					class="layoutbcc"
		            :layout.sync="layout"
		            :col-num="12"
		            :row-height="60"
		            :is-draggable="true"
		            :is-resizable="true"
		            :vertical-compact="true"
		            :use-css-transforms="true"
		    	>
					<grid-item v-for="(item,index) in layout"
							:x="item.x"
							:y="item.y"
							:w="item.w"
							:h="item.h"
							:i="item.i"
							@resize = "resizeEvent"
							@move="moveEvent"
							>
						<div v-if="item.i==0" class="xianshuo">
							<div class="xianshuo_her">
								<div class="xianshuo_herLeft">本月创建的商机</div>
								<div class="xianshuo_herRight">
									<el-dropdown trigger="click">
										<span class="el-dropdown-link">
											<i class="el-icon-more"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
										  <div @click="deleteDemo(index)"><el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item></div>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
							<!-- <div class="xianshuo_li">
								<img src="./img/wuxinxi.png" width="80px"/>
							</div> -->
							<div class="xianshuo_img">
								<img src="./img/wuxinxi.png" width="80px"/>
							</div>
						</div>
						<div v-if="item.i==1" class="xianshuo">
							<div class="xianshuo_her">
								<div class="xianshuo_herLeft">本月的收入</div>
								<div class="xianshuo_herRight">
									<el-dropdown trigger="click">
										<span class="el-dropdown-link">
											<i class="el-icon-more"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
										  <div @click="deleteDemo(index)"><el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item></div>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
							<div class="xianshuo_li">
								$1000.00 <span class=" iconfont icon-xiangshang"></span><span class="color">12.22%</span>
							</div>
							<div class="xianshuo_li">
								<span class="upper">上月: ￥2000.00</span>
							</div>
						</div>
						<div v-if="item.i==2" class="xianshuo">
							<div class="xianshuo_her">
								<div class="xianshuo_herLeft">本月的客户</div>
								<div class="xianshuo_herRight">
									<el-dropdown trigger="click">
										<span class="el-dropdown-link">
											<i class="el-icon-more"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
										  <div @click="deleteDemo(index)"><el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item></div>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
							<div class="xianshuo_li">
								1328 <span class="colorred">12.22%</span>
							</div>
							<div class="xianshuo_li">
								<span class="upper">上月: 177</span>
							</div>
						</div>
						<div v-if="item.i==8" class="xianshuo">
							<div class="xianshuo_her">
								<div class="xianshuo_herLeft">组件9</div>
								<div class="xianshuo_herRight">
									<el-dropdown trigger="click">
										<span class="el-dropdown-link">
											<i class="el-icon-more"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
										  <div @click="deleteDemo(index)"><el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item></div>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
							<div class="charBox" id="jieguoCharFuji">
								<div class="char" id="jieguoChar" ></div>
							</div>
						</div>
					</grid-item>
				</grid-layout>
			</div>
			</el-col>
		  </el-row>
		
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data(){
				return{
					activeNames: ['1'],
					layout: [
					// {"x":0,"y":0,"w":2,"h":2,"i":"0"},
					// {"x":2,"y":0,"w":2,"h":2,"i":"0"},
					// {"x":5,"y":0,"w":2,"h":2,"i":"0"},
					// {"x":11,"y":6,"w":2,"h":2,"i":"0"},
					],
					options: [{
						value: '选项1',
						label: '黄金糕'
						}, {
						value: '选项2',
						label: '双皮奶'
						}, {
						value: '选项3',
						label: '蚵仔煎'
						}, {
						value: '选项4',
						label: '龙须面'
						}, {
						value: '选项5',
						label: '北京烤鸭'
					}],
					value: '',
					checkList: [],
					eckList:[
						{
							label:'{"x":0,"y":0,"w":3,"h":2,"i":"0"}',
							name:'本月创建的商机',
							type:'0',
							id:'0'
						},
						{
							label:'{"x":0,"y":0,"w":3,"h":2,"i":"1"}',
							name:'本月的收入',
							type:'0',
							id:'1'
						},
						{
							label:'{"x":0,"y":0,"w":3,"h":2,"i":"2"}',
							name:'本月的客户',
							type:'0',
							id:'2'
						},
						{
							label:'{"x":0,"y":0,"w":3,"h":7,"i":"3"}',
							name:'组件4',
							type:'0',
							id:'3'
						},
						{
							label:'{"x":0,"y":0,"w":3,"h":7,"i":"4"}',
							name:'组件5',
							type:'0',
							id:'4',
						},
						{
							label:'{"x":0,"y":0,"w":3,"h":7,"i":"5"}',
							name:'组件6',
							type:'0',
							id:'5',
						},
						{
							label:'{"x":0,"y":0,"w":3,"h":7,"i":"6"}',
							name:'组件7',
							type:'0',
							id:'6',
						},
						{
							label:'{"x":0,"y":0,"w":3,"h":7,"i":"7"}',
							name:'组件8',
							type:'0',
							id:'7',
						},
						{
							label:'{"x":0,"y":0,"w":6,"h":5,"i":"8"}',
							name:'组件9',
							type:'0',
							id:'8',
						}
					],
					myChartbb:null,
					chartssizeTime:null,
				}
               
			
            },
			watch:{
				
			},
			
            computed:{
				
               
            },
            methods:{
				//下拉框
				// changeSeleDemo(e){
				// 	if(e=='选项1'){
				// 		this.eckList=[
				// 			{
				// 				label:'{"x":0,"y":0,"w":2,"h":2,"i":"0"}',
				// 				name:'组件1',
				// 				id:'0',
				// 			},
				// 			{
				// 				label:'{"x":0,"y":0,"w":2,"h":2,"i":"1"}',
				// 				name:'组件2',
				// 				id:'1',
				// 			},
				// 			{
				// 				label:'{"x":0,"y":0,"w":6,"h":5,"i":"2"}',
				// 				name:'组件3',
				// 				id:'2',
				// 			},
				// 			{
				// 				label:'{"x":0,"y":0,"w":2,"h":7,"i":"3"}',
				// 				name:'组件4',
				// 				id:'3',
				// 			},
				// 		]
				// 	}else if(e=='选项2'){
				// 		this.eckList=[
				// 			{
				// 				label:'{"x":0,"y":0,"w":2,"h":7,"i":"4"}',
				// 				name:'组件5',
				// 				id:'4',
				// 			},
				// 			{
				// 				label:'{"x":0,"y":0,"w":2,"h":7,"i":"5"}',
				// 				name:'组件6',
				// 				id:'5',
				// 			},
				// 			{
				// 				label:'{"x":0,"y":0,"w":2,"h":7,"i":"6"}',
				// 				name:'组件7',
				// 				id:'6',
				// 			},
				// 			{
				// 				label:'{"x":0,"y":0,"w":2,"h":7,"i":"7"}',
				// 				name:'组件8',
				// 				id:'7',
				// 			},
				// 			{
				// 				label:'{"x":0,"y":0,"w":2,"h":7,"i":"8"}',
				// 				name:'组件9',
				// 				id:'8',
				// 			}
				// 		]
				// 	}
				// 	console.log(this.layout)
				// },
				//删除组件
				deleteDemo(index){
					this.layout.splice(index,1) 
					this.eckdemo()
				},
				//移动位置
				moveEvent: function(i, newX, newY ){
					const msg = "MOVE i=" + i + ", X=" + newX + ", Y=" + newY
					let number = this.eckList.findIndex((arr)=>arr.id==i)
				  	let data = JSON.parse(this.eckList[number].label)
					this.eckList[number].label='{"x":'+newX+',"y":'+newY+',"w":'+data.w+',"h":'+data.h+',"i":'+i+'}'
					this.eckList[number].type='1'
					console.log(this.eckList[number].type);
					console.log(msg);
				},
				//尺寸拉大小
				resizeEvent:function( i , newH , newW , newHPx , newWPx  ){
					const  msg  =  "调整 i= "  + i +  " , H= "  + newH +  " , W= "  + newW +  " , H(px)= "  + newHPx +  " , W(px)= "  + newWPx;
					let number = this.eckList.findIndex((arr)=>arr.id==i)
				  	let data = JSON.parse(this.eckList[number].label)
				  	this.eckList[number].label='{"x":'+data.x+',"y":'+data.y+',"w":'+newW+',"h":'+newH+',"i":'+i+'}'
				    this.eckList[number].type='1'
					console.log(msg)
					console.log(this.eckList[number].label)

				},
				//保存布局
				baocunDemo(){
					sessionStorage.setItem('layout',JSON.stringify(this.layout))
					console.log(JSON.stringify(this.layout))
				},
				//复选框选中
				changeEck(e){
					console.log(e)
					this.layout=[]
					let lengthNum=0
					e.forEach((item,index) => {
						let number = this.eckList.findIndex((arr)=>arr.id==item)
						console.log(this.eckList[number].label)
				  		let data = JSON.parse(this.eckList[number].label)
						let type = JSON.parse(this.eckList[number].type)
						if(number>=0){
							this.layout.push({
								x: type=='1'?data.x:((lengthNum+data.w)>12?0:lengthNum),
								y: type=='1'?data.y:(this.layout.length+1), // puts it at the bottom
								w: data.w,
								h: data.h,
								i: data.i,
							})
							if(type=='0'){
								lengthNum=data.w+lengthNum>11?0:data.w+lengthNum
							}
						}
					});
					this.echartsDemo()
              		this.wathchSize()
				},
				//复现框状态
				eckdemo(){
					this.checkList=[]
					this.layout.forEach(item=>{
						if(this.eckList.findIndex((arr)=>arr.id==item.i)>=0){
							this.checkList.push(
								this.eckList[this.eckList.findIndex((arr)=>arr.id==item.i)].id
							)
						}
					})
					console.log(this.checkList)
				},
				handleChange(val) {
					console.log(val);
				},
               //自适应图表
				wathchSize(){
					this.$nextTick(function () {
						if(!document.getElementById('jieguoChar')){
						return
					}
					var chart = document.getElementById('jieguoChar')
					const that =this
					var erd = elementResizeDetectorMaker()
					erd.listenTo(document.getElementById('jieguoCharFuji'),function(element){
					that.chartssize(chart)
					})
					})
				},
				chartssize(chart){
					this.$nextTick(function () {
					// chart.style.width = document.getElementById('jieguoCharFuji').clientWidth
					// chart.style.height = document.getElementById('jieguoCharFuji').clientHeight
					// console.log(chart.style)
					document.getElementById('jieguoChar').style.height=document.getElementById('jieguoCharFuji').clientHeight-100+"px"
					clearInterval(this.chartssizeTime);
					this.chartssizeTime=setTimeout(()=>{
					this.myChartbb.resize()
					},20)
					})
				},
				//图表
				echartsDemo(data){
					this.$nextTick(function () {
					if(!document.getElementById('jieguoChar')){
						return
					}
					this.myChartbb=echarts.init( document.getElementById('jieguoChar') );
					this.myChartbb.showLoading();
					var option = {
						title: {
							},
							tooltip: {
							trigger: 'axis',
							formatter: function (pram) {
							
							},
							},
							legend: {
							data: [1,2]
							},
							grid: {
							left: '22',
							right: '70',
							top:'100',
							bottom: '5%',
							containLabel: true
							},
							xAxis: {
							type:'value',
							name:'1',
							nameTextStyle:{
								color:'#2E5693',
								fontSize:'12'
							},
							splitNumber:12,
							scale:true,
							axisTick:{       //y轴刻度线
								show:true,
							},
							splitLine: {
									show: false
							},
							axisLabel:{
								show:true,
								textStyle:{
								color:"#83A7DA",
								show:true,
								fontSize:'16',
								},
								formatter:'{value}',
							},
							axisLine:{
								show:true,
								lineStyle:{
								color:'#c0c0c0',
								}
							},
							},
							yAxis: {
							type:'value',
							name:'1',
						
							nameTextStyle:{
								color:'#2E5693'
							},
							splitLine: {
								show: false
							},
							axisLine:{
								show:true,
								lineStyle:{
								color:'#c0c0c0',
								}
							},
							axisLabel:{
								show:true,
								textStyle:{
								color:"#83A7DA",
								show:true,
								fontSize:'16',
								}
							}
							},
							series:[{
								name: 1,
								type: 'line',
								showSymbol: false,
								data:[1,1]
								}]
					};
					
					this.myChartbb.setOption(option,true);
					this.myChartbb.hideLoading();
					window.addEventListener("resize", () => {
						this.myChartbb.resize();
					});
					});
				},
            },
            beforeMount(){
                console.log("挂载前生命周期");
            },
            mounted(){
				this.layout=JSON.parse(sessionStorage.getItem('layout')?sessionStorage.getItem('layout'):'[]')
				this.eckdemo()
				this.echartsDemo()
              	this.wathchSize()
            },
            watch:{
				'message'(){
					console.log("监视器调用");
				}
            }
        })
    </script>
</body>
</html>